<template>
    <div>
        <div class="top">
            <router-link to="/"><van-icon name="wap-home-o" color="red"/></router-link>
            <div>{{songDetail.songinfo.title}}</div>
            <router-link to="/search"><van-icon name="search" /></router-link>
        </div>
        <div class="middle">
            <div class="songImg" :style="{'animation-play-state':animationPlayState}">
                <img @click="turn" :src="songDetail.songinfo.pic_radio" alt="">
            </div>
            <div class="songDist">
                <ul ref="list">
                    <li v-for="(item,index) in lrcContent" :key="index" :class="index == active? 'active2':''" @click="changeTime(item.time)">{{item.content}}</li>
                </ul>
            </div>
        </div>
        <div class="bottom">
            <div class="bottom-icon">

                <van-icon name="like-o" v-show="!isLike"  @click="isLike1"/>
                <van-icon name="like" v-show="isLike" @click="isLike1" color="red"/>
                <a :href="songDetail.songinfo.lrclink"><van-icon name="down" /></a>
            </div>
            <div class="audio">
                <audio ref="audio" :src="songDetail.bitrate.show_link" controls autoplay></audio>
            </div>
        </div>
    </div>
</template>

<script>
    import { Dialog } from 'vant'
    import { Toast } from 'vant';
    import {getSongDetail} from "../api/api";

    export default {
        name: "musicDetail",
        data(){
            return{
                animationPlayState:"paused",
                songDetail:{songinfo:"",bitrate:""},
                isLike:false,
                content:"[ti:大鱼]\r\n[ar:周深]\r\n[al:大鱼]\r\n[by:0]\r\n[offset:0]\r\n[00:02.27]大鱼 (《大鱼海棠》动画电影印象曲) \r\n[00:02.94]\r\n[00:03.63]作词：尹约\r\n[00:04.32]作曲：钱雷\r\n[00:04.91]演唱：周深\r\n[00:05.49]\r\n[00:43.27]海浪无声将夜幕深深淹没\r\n[00:50.09]漫过天空尽头的角落\r\n[00:56.79]大鱼在梦境的缝隙里游过\r\n[01:03.76]凝望你沉睡的轮廓\r\n[01:09.88]看海天一色 听风起雨落\r\n[01:16.48]执子手吹散苍茫茫烟波\r\n[01:23.61]大鱼的翅膀 已经太辽阔\r\n[01:31.09]我松开时间的绳索\r\n[01:37.30]怕你飞远去 怕你离我而去\r\n[01:43.87]更怕你永远停留在这里\r\n[01:50.76]每一滴泪水 都向你流淌去\r\n[01:58.58]倒流进天空的海底\r\n[02:04.68]\r\n[02:19.11]海浪无声将夜幕深深淹没\r\n[02:25.86]漫过天空尽头的角落\r\n[02:32.76]大鱼在梦境的缝隙里游过\r\n[02:39.58]凝望你沉睡的轮廓\r\n[02:45.63]看海天一色 听风起雨落\r\n[02:52.41]执子手吹散苍茫茫烟波\r\n[02:59.30]大鱼的翅膀 已经太辽阔\r\n[03:07.08]我松开时间的绳索\r\n[03:13.09]看你飞远去 看你离我而去\r\n[03:19.86]原来你生来就属于天际\r\n[03:26.68]每一滴泪水 都向你流淌去\r\n[03:34.51]倒流回最初的相遇\r\n[03:44.44]\r\n",
                lrcContent:[],
                currentTime:0,
                active:0,
                noScroll:false,
                collectList:[]
            }
        },
        methods:{
            //点击图片 暂停
            turn(){
                if(this.animationPlayState == 'paused'){
                    this.animationPlayState = 'running';
                    this.$refs.audio.play();
                }else {
                    this.animationPlayState = 'paused';
                    this.$refs.audio.pause();
                }
            },
            //收藏功能
            isLike1(){
                if (this.isLike){
                    Dialog.confirm({
                        title: "确定吗？",
                        message: '真的要这样做吗？',
                    }).then(()=>{
                        this.isLike = !this.isLike
                        this.collectList = this.collectList.filter(item => item!= this.$route.query.songId);
                        localStorage.setItem("coll",JSON.stringify(this.collectList))
                    }).catch(()=>{

                    })
                }else {
                    Toast({
                        message: '收藏成功',
                        icon: 'like-o',
                    });
                    this.isLike = !this.isLike;
                    if(!this.collectList.some(item=>item==this.$route.query.songId)){
                        this.collectList.push(this.$route.query.songId);
                        localStorage.setItem("coll",JSON.stringify(this.collectList))
                    }
                }


            },
            //点击 进度条时间改变
            changeTime(time){
                this.$refs.audio.currentTime = time;
            },


        },
        created() {

            this.collectList = JSON.parse(localStorage.getItem("coll")) || [];
            if (this.collectList.some(item=>item==this.$route.query.songId)){
                this.isLike = true;
            }
            //获取到页面数据
            getSongDetail(this.$route.query.songId).then(res=>{
                // console.log(res)
                this.songDetail = res;
            });
            //处理歌词

            this.lrcContent = this.$store.getters.newlrcContent
        },
        mounted() {
            //播放进度
            this.$refs.audio.currentTime = this.$route.query.currentTime || 0;
            this.$refs.audio.addEventListener("timeupdate",()=>{
                this.currentTime = this.$refs.audio.currentTime
            });
            //暂停与播放
            this.$refs.audio.addEventListener("play",()=>{
                this.animationPlayState = "running";
            });
            this.$refs.audio.addEventListener("pause",()=>{
                this.animationPlayState ="paused"
            });
            //手机触摸
            //    触摸歌词停止滚动
            this.$refs.list.addEventListener("touchstart", () => {
                if (this.timeoutId) {
                    clearTimeout(this.timeoutId);
                }
                this.noScroll = true;
            });
            this.$refs.list.addEventListener("touchend", () => {
                this.timeoutId = setTimeout(() => {
                    this.noScroll = false
                }, 2000)
            });
        },
        watch:{
            //监听进度条
            currentTime(){
                //那个时间段激活那段歌词
                for(let i=0; i<this.lrcContent.length; i++){
                    if(this.lrcContent[i].time > this.currentTime){
                        if (i>0){
                            this.active = i-1;
                        }
                        if(!this.noScroll) {
                            this.$refs.list.scrollTop = this.$refs.list.children[this.active].offsetTop-100;
                        }
                        break;
                    }
                }
            }
        }
    }
</script>

<style lang="less" scoped>
.top{
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28px;
    padding: 0 10px;
    div{
        font-size: 18px;
    }
}
    .songImg{
        text-align: center;
        margin: 40px 0;
        animation: trun 12s linear infinite ;
        animation-play-state:running;
        img{
        width: 200px;
        height: 200px;
        border-radius: 50%;
        }
    }
@-webkit-keyframes trun {
    to {
        transform: rotate(1turn);
    }
}
    .songDist{
        width: 200px;
        font-size: 14px;
        margin: 0 auto;

        ul{
            height: 200px;
            overflow: scroll;
            position: relative;
            text-align: center;
        }

        li{
            margin: 5px 0;
        }
    }
    .bottom{
        margin-top: 30px;
        font-size: 28px;

        .bottom-icon{
            padding: 0 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .audio{
            height: 40px;
            margin-top: 10px;
            text-align: center;
        }
    }
    .active2{
        color: red;
    }

</style>